<template>
    <div class="markets">
        <div class="search-line">
            <div class="icon" style="--icon: url(/icon/search1.svg)"></div>
            <input type="text" v-model="searchStr" placeholder="Search" />
        </div>
        <div class="stock-list-box">
            <div class="title-box">
                <div class="title-list">
                    <div class="title-item" v-for="item in sub_page" :key="item.id" @click="selected_page = item" :style="`color: ${ item.id == selected_page.id ? 'var(--active-color)' : 'var(--text-color)' }; font-weight: ${ item.id == selected_page.id ? '700' : '500' }`">{{ item.name }}</div>
                </div>
                <div class="country">
                    <div class="icon" style="--icon: url(/language/lang/en.png)"></div>
                    <div class="text">USA</div>
                </div>
            </div>
            <div class="stock-list">
                <div class="stock-item" v-for="item in show_stock_list" :key="item.id" @click="jumpToTabbarTrade(item)">
                    <div class="left-box">
                        <div class="left">
                            <div class="symbol-box">
                                <div class="symbol">{{ item.symbol }}</div>
                                <div class="icon" style="--icon: url(/language/lang/en.png)"></div>
                            </div>
                            <div class="name">{{ item.name }}</div>
                        </div>
                        <div class="right">
                            <div class="price">{{ item.price }}</div>
                            <div class="change-price" :style="`color: ${ parseFloat(item.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.change_price }}</div>
                            <div class="change" :style="`color: ${ parseFloat(item.change) >= 0 ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">{{ item.change }}</div>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="btn" @click.stop="item.is_watch = !item.is_watch">
                            <div class="icon" :style="`--icon: url(/icon/show/nowatch.svg); opacity: ${ item.is_watch ? 0 : 1 }`"></div>
                            <div class="icon" :style="`--icon: url(/icon/show/watch.svg); opacity: ${ item.is_watch ? 1 : 0 }`"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { routerTo } from '@/utils/jump';
import { stock_list, watch_list, openStockDetail, jumpToTabbarTrade } from '@/service/market';

const sub_page = [
    { id: 1, name: 'Stock Markets' },
    { id: 2, name: 'Watchlist' },
];

const selected_page = ref(sub_page[0]);

const searchStr = ref('');

const show_stock_list = computed(() => {
    if (selected_page.value.id == 1) {
        if (!searchStr.value) {
            return stock_list.value;
        }
        return stock_list.value.filter(item => item.symbol.toLowerCase().includes(searchStr.value.toLowerCase()));
    } else {
        if (!searchStr.value) {
            return watch_list.value;
        }
        return watch_list.value.filter(item => item.symbol.toLowerCase().includes(searchStr.value.toLowerCase()));
    }
});

onMounted(() => {
    // 获取当前页面 selected_page
    const urlParams = new URLSearchParams(window.location.search);
    const page = urlParams.get('page'); // market or watchlist
    if (page == 'watchlist') {
        selected_page.value = sub_page[1];
    } else {
        selected_page.value = sub_page[0];
    }
});
</script>

<style scoped lang="less">
.markets {
    --gap: 3.5vw;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    .search-line {
        display: flex;
        align-items: center;
        gap: 2vw;
        padding: 2vw;
        background-color: var(--bg-strong-color);
        border-radius: 2vw;

        .icon {
            --size: 4vw;
            --w: var(--size);
            --h: var(--size);
        }

        input {
            flex: 1;
            font-size: 3.5vw;
            background-color: #00000000;
            border: 0;
            outline: 0;
        }
    }

    .stock-list-box {
        display: flex;
        flex-direction: column;
        gap: 3vw;

        .title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 3vw;

            .title-list {
                display: flex;
                align-items: center;
                gap: 3vw;

                .title-item {
                    font-size: 3.5vw;
                    font-weight: 700;
                }
            }

            .country {
                box-sizing: border-box;
                width: 25vw;
                padding: 1vw 2vw;
                border-radius: 2vw;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #fff;
                box-shadow: 0 0 5vw rgba(0, 0, 0, 0.05);

                .icon {
                    --size: 4.5vw;
                    --w: var(--size);
                    --h: var(--size);
                }

                .text {
                    font-size: 3vw;
                }
            }
        }

        .stock-list {
            display: flex;
            flex-direction: column;
            gap: 2vw;

            .stock-item {
                box-sizing: border-box;
                width: 100%;
                padding: 2vw 3vw;
                display: flex;
                justify-content: space-between;
                gap: 3vw;
                background-color: #fff;
                border-radius: 2vw;

                .left-box {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 2vw;

                    .left, .right {
                        display: flex;
                        flex-direction: column;
                    }
                    
                    .left {
                        .symbol-box {
                            display: flex;
                            align-items: center;
                            gap: 2vw;

                            .symbol {
                                font-size: 3.5vw;
                                font-weight: 500;
                            }

                            .icon {
                                --size: 4.5vw;
                                --w: var(--size);
                                --h: var(--size);
                            }
                        }
                        
                        .name {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }

                    .right {
                        align-items: flex-end;

                        .price {
                            font-size: 3.5vw;
                            font-weight: 500;
                            color: var(--text-color);
                        }

                        .change-price, .change {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }
                }

                .right-box {
                    width: 7vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    .btn {
                        --size: 4vw;
                        --w: var(--size);
                        --h: var(--size);
                        width: var(--w);
                        height: var(--h);
                        position: relative;

                        .icon {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            
                        }
                    }
                }
            }
        }
    }
}
</style>